<script lang="ts" setup>
import { ref } from 'vue'
import EasyForm from '@/components/form/src/index'
import type { FieldListItem } from '@/components/form'
import { useFormList } from './columns'

const formData = ref({
  name: '1',
  age: 10,
  value: '',
  radio: 1
})

const formList: FieldListItem[] = useFormList(formData.value)
</script>

<template>
  <div>
    <div>{{ JSON.stringify(formData) }}</div>

    <EasyForm
      v-model:formData="formData"
      :fieldList="formList"
      labelWidth="140px"
      :span="6"
      :rules="{
        name: [{ required: true, message: '请输入姓名' }],
        age: [{ required: true, message: '请输入年龄' }],
        value: [{ required: true, message: '请输入值123' }]
      }"
    />
  </div>
</template>
